<template>
  <el-container :style="`height:${Height}px;width:${Width}px;`">
    <el-header style="height: 35px;">
      <el-row>
        <el-col :span="4">
          <el-button size="medium" type="text">{{ CurrentMonth }}</el-button>
        </el-col>
        <el-col :span="20" class="flex-right">
          <el-button size="medium" type="text" @click="handleUpMonth">上个月</el-button>
          <el-button size="medium" type="text" @click="handleCurrMonth">本月</el-button>
          <el-button size="medium" type="text" @click="hanldeNextMonth">下个月</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-checkbox v-for="item in Shylist" @change="handleChange($event, item)">{{ item }}</el-checkbox>
      </el-row>
    </el-header>
    <el-main>
      <div class="table">
        <div class="cell header">
          周一
        </div>
        <div class="cell header">
          周二
        </div>
        <div class="cell header">
          周三
        </div>
        <div class="cell header">
          周四
        </div>
        <div class="cell header">
          周五
        </div>
        <div class="cell header">
          周六
        </div>
        <div class="cell header">
          周天
        </div>
        <!-- 循环生成 42 个单元格（6 行 * 7 列） -->
        <div v-for="item in Data" :class="item.currMonth == 1 ? 'cell' : 'cell-gray'" @click="handleCellClick(item)">
          <div class="sub-cell">
            {{ item.date }}
          </div>
          <div class="sub-cell text-align-left">
            {{ item.shy }}
          </div>
        </div>
      </div>
    </el-main>
  </el-container>


</template>
<script>
export default {
  name: 'Calendar',
  props: ['Height', 'Width', 'Data', 'CurrentMonth', 'DataCopy'],
  data() {
    return {
      cellActive: false,
      ShyCheckList: []
    }
  },
  computed: {
    Shylist: function () {
      const set = new Set();
      for (let item of this.DataCopy) {
        if (item.shy.indexOf(',') > -1) {
          let arr = item.shy.split(',');
          for (let i = 0; i < arr.length; i++) {
            set.add(arr[i]);
          }
        } else {
          if (item.shy != '') {
            set.add(item.shy);
          }
        }

      }
      return Array.from(set);
    }
  },
  created() {

  },
  methods: {
    handleCellClick(item) {
      this.cellActive = true;
      this.$emit('CellClick', item);
    },
    handleUpMonth() {
      this.$emit('UpMonthClick');
    },
    handleCurrMonth() {
      this.$emit('CurrMonthClick');
    },
    hanldeNextMonth() {
      this.$emit('NextMonthClick');
    },
    handleChange(e, item) {
      if (e) {
        this.ShyCheckList.push(item);
      } else {
        let index = this.ShyCheckList.indexOf(item);
        if (index > -1) {
          this.ShyCheckList.splice(index, 1);
        }
      }

      if (this.ShyCheckList.length > 0) {
        this.Data = [];
        for (let i = 0; i < this.DataCopy.length; i++) {
          this.Data.push({
            currMonth: this.DataCopy[i].currMonth,
            date: this.DataCopy[i].date,
            shy: this.DataCopy[i].shy
          });
        }
        for (let i = 0; i < this.Data.length; i++) {
          let shylist = this.Data[i].shy.split(',');
          let currShy = [];
          for (let j = 0; j < shylist.length; j++) {
            for (let k = 0; k < this.ShyCheckList.length; k++) {
              if (shylist[j] == this.ShyCheckList[k]) {
                currShy.push(shylist[j]);
                break;
              }
            }
          }
          if (currShy && currShy.length > 0) {
            this.Data[i].shy = currShy.join(',');
          } else {
            this.Data[i].shy = '';
          }
        }
      } else {
        this.Data = [];
        for (let i = 0; i < this.DataCopy.length; i++) {
          this.Data.push({
            currMonth: this.DataCopy[i].currMonth,
            date: this.DataCopy[i].date,
            shy: this.DataCopy[i].shy
          });
        }
      }
    }
  }
}
</script>
<style scoped>
.flex-right {
  display: flex;
  justify-content: flex-end;
  padding-right: 80px;
}

/* 定义表格容器样式 */
.table {
  display: grid;
  /* 定义 7 列，每列宽度平均分配 */
  grid-template-columns: repeat(7, 1fr);
  /* 定义 6 行，高度根据内容自适应 */
  grid-auto-rows: auto;
  gap: 1px;
  background-color: #ccc;
  width: 100%;
  max-width: 800px;
  margin: 0;
  border: 1px solid #ccc;
}

/* 定义表格单元格样式 */
.cell {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  display: grid;
  /* 单元格内部分为 3 行，每行高度平均分配 */
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
}

.header {
  height: 35px;
}

.cell:hover {
  background-color: #cbe0f3;
}

.cell-gray {
  background-color: #eee;
  padding: 10px;
  text-align: center;
  display: grid;
  /* 单元格内部分为 3 行，每行高度平均分配 */
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
}

.sub-cell {
  padding: 5px;
  color: rgb(30, 30, 32);
}

.text-align-left {
  text-align: left;
  font-size: 14px;
  color: rgb(11, 114, 218)
}

.cellActive {
  background-color: rgb(255, 235, 188);
}

.cellNotActive {
  background-color: #fff;
}
</style>
